<template>
  <div class="page-home">
    <MyHeader />

    <!-- 轮播图 -->
    <div class="swipe-box">
      <van-swipe class="swipe" :autoplay="2000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
          <img :src="item.img" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 网格 -->
    <div class="grid-box">
      <van-grid :column-num="5" :border="false">
        <van-grid-item
          v-for="item in gridList"
          :key="item.id"
          :icon="item.url"
          :text="item.text"
        />
      </van-grid>
    </div>

    <!-- 秒杀 -->
    <div class="seckill-box" v-if="isShow">
      <van-count-down :time="time" @finish="handleFinish">
        <template #default="timeData">
          <span>秒杀倒计时：</span>
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down>

      <div class="seckill-list">
        <div
          class="seckill-item"
          v-for="item in seckillList"
          :key="item.proid"
          @click="handleClick(item)"
        >
          <img class="seckill-item_img" :src="item.img1" alt="" />
          <p class="seckill-item_price">￥{{ item.originprice }}</p>
        </div>
      </div>
    </div>

    <!-- 商品数据 -->
    <div class="product-list">
      <div
        class="product-item"
        v-for="item in productList"
        :key="item.proid"
        @click="handleClick(item)"
      >
        <img class="product-item_img" :src="item.img1" alt="" />
        <p class="product-item_title">{{ item.proname }}}</p>
        <p class="product-item_price">￥{{ item.originprice }}</p>
      </div>
    </div>

    <div class="no-more" v-if="isFinished">没有更多了</div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import type { IProduct } from "@/api/home";
import MyHeader from "@/components/my-header/index.vue";

//引入拆分出去的hook
import { useBanner, useProduct, useGridList, useSeckill } from "@/hooks/home";

const { bannerList } = useBanner();
const { productList, isFinished } = useProduct();
const { gridList } = useGridList();
const { seckillList, time, handleFinish, isShow } = useSeckill();

const router = useRouter();
const handleClick = (product: IProduct) => {
  router.push({
    name: "detail",
    params: {
      id: product.proid,
    },
  });
};
</script>

<style lang="scss" scoped>
.swipe-box {
  height: 198px;
  padding: 20px;
  overflow: hidden;
  background-color: #ccc;

  .swipe {
    height: 100%;
  }

  img {
    height: 100%;
    width: 100%;
  }
}

.product-list {
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: 50%;
  height: 250px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &_img {
    width: 90%;
    object-fit: contain; //图片缩放模式设置
  }

  &_title {
    margin: 0;
    font-size: 18px;
    line-height: 20px;
    height: 40px;
    align-self: flex-start;
    color: #000;
    // 多行文本溢出
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  &_price {
    margin: 0;
    margin-top: 10px;
    font-size: 18px;
    color: #ee0a24;
    align-self: flex-start;
  }
}

.no-more {
  height: 50px;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
}

// 网格
// 如果当前组件样式设置了 scoped,要去修改第三方组件的样式的话，需要使用 :deep() 深度选择器
// 为什么 .van-grid-item 可以不加 :deep() 呢
// 因为它是组件根元素的类名，而这个根元素上也会添加 data-v-xxx的属性
.van-grid-item {
  overflow: hidden;
}

:deep(.van-grid-item__text) {
  white-space: nowrap;
}

// 秒杀
.seckill-box {
  overflow-x: auto;
}

//秒杀倒计时
.van-count-down {
  display: flex;
  padding-left: 15px;
}
.block[data-v-2c1dc063] {
  background-color: red;
}
.colon[data-v-2c1dc063] {
  color: red;
}

//秒杀商品列表
.seckill-list {
  display: flex;
}

.seckill-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 150px;
  flex-shrink: 0; //不缩小
  overflow: hidden;

  &_img {
    display: block;
    height: 100px;
  }

  &_price {
    margin: 0;
    margin-top: 10px;
    font-size: 18px;
    color: #ee0a24;
    align-self: flex-start;
  }
}

.colon {
  display: inline-block;
  margin: 0 4px;
  color: #1989fa;
}

.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #1989fa;
}
</style>
